<template>
  <div class="userFiled">
    <userfiled-options @search="search" ref="userfiledOptions"/>
    <userfiled-table @search="search" :loading="loading" :data="data"/>
    <div class="demonstration-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageParams.size"
        layout="total, prev, pager, next"
        :total="pageParams.totalCount"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import UserfiledOptions from "./controls/userfiledOptions";
import UserfiledTable from "./controls/userfiledTable";
import queryString from "querystring";
import page from "data/page";
export default {
  name: "userFiled",
  mixins: [page],
  data() {
    return {
      type: "",
      id: "",
      data: [],
      currentPage: 1,
      loading: false,
      state: false
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    search() {
      //搜索
      this.loading = true;
      const optionParams = this.$refs.userfiledOptions.getData();
      const tableParams = {
        size: 20,
        page: this.currentPage - 1
      };
      let params = this.lodash.assign({}, optionParams, tableParams);
      const param = queryString.stringify(params || {});
      this.api
        .get(`/groundPerson?${param}`)
        .then(res => {
          this.loading = false;
          if (!res.data) return;
          this.data = res.data.list;
          this.setPage(res.data);
          this.dataInit();
        })
        .catch(err => {
          console.log(err);
          this.loading = false;
          this.$message(err.data);
        });
    },
    dataInit() {
      //数据初始化
      this.data.map(item => {
        if(item.sign){
          item.sign="已签约"
        }else{
          item.sign="未签约"
        }
        //if( item.country ) item.address = item.address || `${item.provinceValue}-${item.countryValue}-${item.cityValue}`;
        item.address =
          item.address ||
          `${item.provinceValue || ""}-${item.cityValue ||
            ""}-${item.countryValue || ""}`;
      });
    },
    dialogState(data) {
      data = data || {};
      this.state = data.state;
      this.type = data.type;
      this.id = data.id;
    }
  },
  watch: {
    currentPage() {
      this.search();
    }
  },
  components: {
    UserfiledOptions,
    UserfiledTable
  }
};
</script>
 
<style lang="less" scoped>
</style>
